h3 Form xEditable
  small Edit in place for AngularJS

.row(ng-controller='FormxEditableController as form')
  .col-md-6
    .panel.panel-default
      .panel-heading HTML5 Inputs
      .panel-body
        .form-horizontal
          .form-group.m0
            label.col-sm-4.control-label Email: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-email='form.user.email') {{ form.user.email || &apos;empty&apos; }}
          .form-group.m0
            label.col-sm-4.control-label Tel: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-tel='form.user.tel', e-pattern='\\d{3}\-\\d{2}\-\\d{2}', e-title='xxx-xx-xx') {{ form.user.tel || &apos;empty&apos; }}
          .form-group.m0
            label.col-sm-4.control-label Number: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-number='form.user.number', e-min='18') {{ form.user.number || &apos;empty&apos; }}
          .form-group.m0
            label.col-sm-4.control-label Range: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-range='form.user.range', e-step='5') {{ form.user.range || &apos;empty&apos; }}

          .form-group.m0
            label.col-sm-4.control-label Url: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-url='form.user.url') {{ form.user.url || &apos;empty&apos; }}

          .form-group.m0
            label.col-sm-4.control-label Search: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-search='form.user.search') {{ form.user.search || &apos;empty&apos; }}

          .form-group.m0
            label.col-sm-4.control-label Color: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-color='form.user.color') {{ form.user.color || &apos;empty&apos; }}

          .form-group.m0
            label.col-sm-4.control-label Date: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-date='form.user.date') {{ form.user.date || &apos;empty&apos; }}

          .form-group.m0
            label.col-sm-4.control-label Time: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-time='form.user.time') {{ form.user.time || &apos;empty&apos; }}

          .form-group.m0
            label.col-sm-4.control-label Datetime: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-datetime='form.user.datetime') {{ form.user.datetime || &apos;empty&apos; }}

          .form-group.m0
            label.col-sm-4.control-label Month: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-month='form.user.month') {{ form.user.month || &apos;empty&apos; }}

          .form-group.m0
            label.col-sm-4.control-label Week: 
            .col-sm-8
              p.form-control-static
                a(href='#', editable-week='form.user.week') {{ form.user.week || &apos;empty&apos; }}
  .col-md-6
    .panel.panel-default
      .panel-heading Controls
      .panel-body
        .form-horizontal
          .form-group.m0
            label.col-sm-4.control-label Text
            .col-sm-8
              p.form-control-static
                a(href='#', editable-text='form.user.name') {{ form.user.name || &apos;empty&apos; }}
          .form-group.m0
            label.col-sm-4.control-label Local Select
            .col-sm-8
              p.form-control-static
                a(href='#', editable-select='form.user2.status', e-ng-options='s.value as s.text for s in form.statuses') {{ form.showStatus() }}
          .form-group.m0
            label.col-sm-4.control-label Remote Select
            .col-sm-8
              p.form-control-static
                a(href='#', editable-select='form.user3.text', ng-init='form.loadGroups()', e-ng-options='g.text as g.text for g in form.groups') {{ form.user3.text || &apos;not set&apos; }}  
          .form-group.m0
            label.col-sm-4.control-label Textarea
            .col-sm-8
              p.form-control-static
                a(href='#', editable-textarea='form.user.desc', e-rows='3', e-cols='30') {{ form.user.desc || 'no description' }}    
          .form-group.m0
            label.col-sm-4.control-label Typeahead
            .col-sm-8
              p.form-control-static
                a(href='#', editable-text='form.user4.state', e-typeahead='state for state in form.states | filter:$viewValue | limitTo:8') {{ form.user4.state || &apos;empty&apos; }}  

